<template>
	<view class="applyAdministrators">
		<view class="applyAdministrators-content ff-bg-fff ff-color-222 ff-font-14 ff-margin-12 ff-border-radius-10">
			<view
				class="ff-font-weight-600 ff-padding-left-15 ff-color-222 ff-padding-top-15 ff-font-15 ff-margin-bottom-5">
				申请成为管理员</view>
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-border-bottom">
				<view class="applyAdministrators-content-title">法定代表人电话</view>
				<input class="ff-text-right ff-color-D3" :disabled="true" v-model.trim="params.administratorsphone"
					placeholder="请输入" type="number" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-border-bottom">
				<view class="applyAdministrators-content-title">授权码</view>
				<view class="ff-align-items-one">
					<u-input :clearable="false" v-model.trim="params.code" input-align="center"
						class="ff-line-height-1-3" placeholder="请输入" type="number" />
					<view class="ff-margin-left-20">
						<view v-if="validCodeList.disableValidCode" @click.stop="getValidCoded" class="ff-color-blue">
							{{ validCodeList.validCodeText }}
						</view>
						<view v-else class="ff-color-cancel">{{ validCodeList.validTimeText }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips ff-font-12 ff-color-222" @click="tipsClick"><u-icon name="question-circle" color="red"
				size="36"></u-icon></view>
		<view class="ff-flex-between">
			<view class="applyAdministrators-but"><u-button type="primary" shape="circle"
					@click="applyClick">确认申请</u-button></view>
		</view>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
		<u-modal title="申请成为新管理员方法" confirm-text="我知道了" v-model="tipsModal" :content-style="{ 'line-height': '1.5' }"
			:content="tipsContent" />
		<u-modal v-model="applyState" title="温馨提示" @confirm="loginConfirm" :content-style="{ 'line-height': '1.5' }"
			content="恭喜您成为新管理员！"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		name: 'applyAdministrators',
		data() {
			return {
				tipsModal: false, // 小提示弹框显/隐
				tipsContent: '1. 点击【获取授权码】按钮，联系法定代表人告知授权码；2. 输入授权码并点击提交按钮，验证成功后，需重新登录获取管理员权限，即可成为新管理员。',
				applyState: false, // 恭喜成为管理员弹框显/隐
				// 倒计时系列内容
				validCodeList: {
					disableValidCode: true, // 按钮是否可以点击
					validCodeText: '获取授权码', // 获取授权码
					validTimeText: '60秒', // 倒计时文案
					count: 60, // 倒计时秒数
					timer: null // 定时器
				},
				// 提交的参数
				params: {
					administratorsphone: '',
					code: ''
				}
			};
		},
		onLoad() {
			this.getAdminPhone(); // 获取当前管理员手机号
			this.tipsModal = true;
		},
		methods: {
			...mapMutations(['changeTabberIndex']),
			// 点击小提示----
			tipsClick() {
				this.tipsModal = true;
			},
			// 获取当前管理员手机号
			async getAdminPhone() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/sys/user/getManagerPhone'
				});
				if (data.code == 200) {
					this.params.administratorsphone = data.data;
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 点击获取管理员授权码
			getValidCoded() {
				this.$refs.loading.openLoading('获取授权码···'); // 打开loading动画
				this.$http.get({
					url: `/sys/user/sendApplyManagerCode`
				}).then(res => {
					// console.log('获取授权码----', res);
					if (res.code == 200 && res.data) {
						this.$refs.uToast.show({
							title: '授权码发送成功，请尽快联系法定代表人获取授权码',
							type: 'success',
							duration: 3000
						});
						this.validCodeList.count = 60;
						this.validCodeList.disableValidCode = false;
						this.validCodeList.timer = setInterval(() => {
							if (this.validCodeList.count > 0 && this.validCodeList.count <= 60) {
								this.validCodeList.validTimeText = this.validCodeList.count + '秒';
								this.validCodeList.count--;
							} else {
								this.validCodeList.disableValidCode = true;
								this.validCodeList.validCodeText = '重新获取';
								this.validCodeList.validTimeText = '60秒';
								clearInterval(this.validCodeList.timer);
								this.validCodeList.timer = null;
							}
						}, 1000);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
					this.$refs.loading.closeLoading(); // 关闭loading动画
				});
			},
			// 申请成为管理员----提交
			applyClick() {
				if (!this.params.code) {
					this.$refs.uToast.show({
						title: '请输入授权码',
						type: 'error'
					});
					return;
				}
				this.$refs.loading.openLoading('申请中···'); // 打开loading动画
				this.$http
					.post({
						url: `/sys/user/applyManager/${this.params.code}`,
						data: this.params
					})
					.then(res => {
						// console.log('申请管理员返回的结果-----', res);
						this.$refs.loading.closeLoading(); // 关闭loading动画
						if (res.code == 200) {
							this.applyState = true;
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
					});
			},
			// 申请成功弹窗----确定操作
			loginConfirm() {
				this.changeTabberIndex(0);
				uni.clearStorageSync(); // 清空本地所有的缓存数据
				getApp().closeScheduledTask(); // 关闭定时任务
				getApp().closeWebsocket(); // 关闭websocket任务
				this.$pageJump.reLaunch('/pages/loginRegister/login/Login');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.applyAdministrators {
		&-but {
			width: 90%;
			margin: 12% 5%;
		}

		.tips {
			position: absolute;
			right: 5%;
		}
	}
</style>